<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  name: "MapContainer.vue",
  data(){
    return{
      //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
      //map:null,
    }
  },
  methods:{
    initMap(){
      var self = this;
      AMapLoader.load({
        key:"8b810395590f868723889b77e8d2af5f",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap)=>{
        this.map = new AMap.Map("container",{  //设置地图容器id
          viewMode:"2D",    //是否为3D地图模式
          zoom:10,           //初始化地图级别
          resizeEnable: true,
          center:[105.602725,57.076636], //初始化地图中心点位置
        });
        AMap.plugin('AMap.Geolocation', function() {
          var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
            position:'LB',    //定位按钮的停靠位置
            offset: [20, 30], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
            zoomToAccuracy: false,   //定位成功后是否自动调整地图视野到定位点
            showCircle:false
          });
          self.map.addControl(geolocation);
          /*geolocation.getCurrentPosition(function(status,result){
            if(status=='complete'){
              self.onComplete(result)
            }else{
              self.onError(result)
            }
          });*/
        });
      }).catch(e=>{
        console.log(e);
      })
    },

    onComplete(data) {
      document.getElementById('status').innerHTML='定位成功'
      var str = [];
      str.push('定位结果：' + data.position);
      str.push('定位类别：' + data.location_type);
      if(data.accuracy){
        str.push('精度：' + data.accuracy + ' 米');
      }//如为IP精确定位结果则没有精度信息
      str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
      document.getElementById('result').innerHTML = str.join('<br>');
    },
    onError(data) {
      document.getElementById('status').innerHTML='定位失败'
      document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message+'</br>浏览器返回信息：'+data.originMessage;
    }
  },
  mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();
  }
}
</script>

<style scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>